チーム開発でVSCodeの拡張機能やフォーマット設定などを統一したい時に便利な設定ファイルについて

ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。

#VSCode（Visual Studio Code）

今泉大樹

2023.06.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。

みなさんはエディターは何を利用していますか？（火種）

私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。

今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。

何がうれしいのか

.vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。

{
  "extensions.ignoreRecommendations": false,
  // TSファイルにのみ適用する設定
  "": {
    // ファイル保存時のフォーマットを設定
    "editor.formatOnSave": true,
    // フォーマッタを指定
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

これに合わせて、.vscode/extensions.jsonでフォーマッタなどの推奨する拡張機能をリストアップします。

{
  "recommendations": [
    "esbenp.prettier-vscode"
  ]
}

未インストールのメンバーがVSCodeでプロジェクトフォルダを開いた場合、以下のように推奨拡張機能のインストールを促してくれます。

20230616_vscode_settings_share_recomend_extension

これで、「○○の拡張機能のインストールしといて」と言わず「VSCodeから拡張機能を推奨されたらインストールしておいて」くらいのコミュニケーションですみますね。

なお、コンテナ環境を利用できる場合、Remote DevelopmentやRemote（Dev） Containerという機能で統一された環境で開発可能ですが、今回は説明を省略いたします。

気になる方は以下のブログ記事を参照してください。

settings.jsonについて

上では「フォーマッタとかの設定を入れられるすごいやつ」のような説明をしましたが、実際はこれらに限らずVSCodeのあらゆる設定を記述できるものです。

ユーザーのグローバルな設定を保持するファイルや、ワークスペースごとの設定を保持するファイルなど、状況に応じて柔軟に設定できます。

今回は省略していますが拡張機能ごとに細かい設定を記述できるため、以前私はPHPの古めのフレームワーク向けのフォーマッタの設定をチームで共有したことがあります。

extension.jsonについて

ワークスペースやプロジェクトごとに推奨する拡張機能を記述できます。

なお、拡張機能の識別子は拡張機能ページから取得でき、Add to Workspace Recommendations を選択することでそのまま.vscode/extensions.jsonに追加してくれます。

20230616_vscode_settings_share_recomend_extension_extension_id

実際にチーム開発で利用する時には

.vscode/settings.json や .vscode/extensions.jsonの利用により拡張機能や利用するフォーマッタの統一ができました。

実際に業務で利用する際には利用するフォーマッタやリンタ自体の設定ファイルを用意しておくことで、プロジェクトごとのコードの見た目や品質維持に効果的だと思います。

例えばTypeScriptをメインで利用するプロジェクトでは以下のように.prettierrc.jsonや.eslintrc.json を用意するようなイメージです。

.
├── .eslintrc.json #eslintの設定ファイル
├── .prettierrc.json #prettierの設定ファイル
├── .vscode
│   ├── extensions.json
│   └── settings.json
├── package-lock.json
├── package.json
├── src
└── tsconfig.json